import { useContext, useEffect, useRef } from 'react'
import { Button, Form, Input, Popconfirm } from 'antd'
import { InputRef } from 'antd/lib/input'
import { WardMaintenanceContext } from '../../_context'

import styles from '../../idnex.module.less'
import IconSvg from '@/components/IconSvg'
import { isNullArray } from '@/utils'

export default () => {
  const {
    wardList,
    seleteMenu,
    addWard,
    isAdd,
    seleteMenuTwo,
    handleWardEdit,
    handleCancleWard,
    deleteWarded,
    wardForm,
    saveWard,
    editWard,
    wardInput,
    isEdit,
    handleEditWardCancel,
    wardTotal,
  } = useContext(WardMaintenanceContext)

  interface TableItem {
    item: {
      id: number
      sonSize: number
      type: string
      unit: string
      flag: boolean
      code?: number
    }
  }

  const TableInfo = ({ item }: TableItem) => {
    console.log('组件🚀🚀🚀🚀', item)
    const wardItemInput = useRef<InputRef>(null)

    useEffect(() => {
      if (item.flag) {
        wardItemInput?.current!.focus()
      }
    }, [item.flag])

    return (
      <>
        {item.flag ? (
          <>
            <Form form={wardForm}>
              <Form.Item style={{ width: '100%' }} name='unit' rules={[{ required: true, message: '请输入病区名称' }]}>
                <Input ref={wardItemInput} placeholder='请输入病区名称' />
              </Form.Item>
            </Form>
            <div className={styles.btns}>
              <Button onClick={() => editWard(item)} type='link' icon={<IconSvg name='asveward' />}>
                保存
              </Button>
              <Button
                onClick={handleEditWardCancel}
                className={styles.cancel}
                type='link'
                icon={<IconSvg name='cancle' />}
              >
                取消
              </Button>
            </div>
          </>
        ) : (
          <>
            <div className={styles.leftdata}>
              <div title={item.unit} className={`${styles.txt} ${styles.ellipsis}`}>
                {item.unit}
              </div>
              <div className={styles.text}>病区编号：{item.code}</div>
            </div>
            <div className={styles.btns}>
              <Button
                disabled={isEdit || isAdd}
                onClick={() => handleWardEdit(item)}
                icon={<IconSvg name='edittxt' />}
                type='link'
              >
                编辑
              </Button>
              <Popconfirm title='确定删除吗?' onConfirm={() => deleteWarded(item.id)} okText='确定' cancelText='取消'>
                <Button icon={<IconSvg name='delete' />} danger type='link'>
                  删除
                </Button>
              </Popconfirm>
            </div>
          </>
        )}
      </>
    )
  }

  return (
    <div className={styles.right}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '28px' }}>
        <div className={styles.title} style={{ margin: 0 }}>
          {wardList![seleteMenu]?.endemicAreaVos![seleteMenuTwo]?.unit}
        </div>
      </div>
      <div className={styles['right-content']}>
        {isNullArray(wardList![seleteMenu]?.endemicAreaVos![seleteMenuTwo]?.endemicAreaVos) &&
          wardList[seleteMenu]?.endemicAreaVos![seleteMenuTwo]?.endemicAreaVos?.map((item) => (
            <div className={styles['right-info']} key={item.id}>
              <TableInfo item={item} />
            </div>
          ))}

        {isAdd ? (
          <div className={styles['right-info']}>
            <Form form={wardForm}>
              <Form.Item style={{ width: '100%' }} name='unit' rules={[{ required: true, message: '请输入病区名称' }]}>
                <Input ref={wardInput} placeholder='请输入病区名称' />
              </Form.Item>
            </Form>
            <div className={styles.btns}>
              <Button onClick={saveWard} type='link' icon={<IconSvg name='asveward' />}>
                保存
              </Button>
              <Button onClick={handleCancleWard} className={styles.cancel} type='link' icon={<IconSvg name='cancle' />}>
                取消
              </Button>
            </div>
          </div>
        ) : (
          <>
            {!isEdit && (
              <div className={styles['right-info']}>
                <div className={styles.add} onClick={addWard}>
                  <span>
                    <IconSvg name='addward' />
                  </span>
                  添加病区名称
                </div>
              </div>
            )}
          </>
        )}
      </div>

      <div className={styles.total}>
        <div>全院所有病区数合计：{wardTotal}</div>
        <div className={styles.totalimg}>
          <IconSvg name='wardtotal' />
        </div>
      </div>
    </div>
  )
}
